import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import { Button } from 'antd-mobile'
import WithdrawVM from 'cvm/withdraw/withdraw'
import './withdraw.less'

const WithdrawList = observer(({ vm }) => {
  const item = vm.withdrawDetail
  return (
    <div>
      {
        item.Banlance !== undefined ? <div className='withdraw-box'>
          <div className='account-balance'>
            <p className='rule' onClick={() => { vm.handleWithdrawRule() }}>提现规则</p>
            <p className='balance-title'>账户余额(元)</p>
            <p className='balance-count'>{item.Banlance.toFixed(2)}</p>
          </div>
          <div className='flex-wrap flow-record border-bottom-3'
            onClick={() => { vm.handleToChooseWay(item.CashType, item.BankName, item.BankNum, item.BankIcon, item.WXNickName, item.WZHeadKey) }}
          >
            <div className='flex-1'>
              <p className='company'>提现账户</p>
              <p className='time'>1-3个工作日到账</p>
            </div>
            <div className='flex-1 price'>
              {
                item.CashType === 0 && <span>未绑定</span>
              }
              {
                item.CashType === 1 && <span style={{ color: '#000' }}>{item.WXNickName}(微信)</span>
              }
              {
                item.CashType === 2 && <span style={{ color: '#000' }}>{item.BankName}({item.BankNum.substring(item.BankNum.length - 4)})</span>
              }
              <img src={require('../../images/right.png')} />
            </div>
          </div>
          <div className='flex-wrap flow-record border-bottom-0' onClick={() => vm.handleRecordPresent()}>
            <div className='flex-4'>
              <p className='company'>提现记录</p>
              <p className='time'>共提现{item.CashCount}笔，合计{item.CashTotal.toFixed(2)}元</p>
            </div>
            <div className='flex-1 price'><img src={require('../../images/right.png')} /></div>
          </div>
          <div className='withdraw-tips'>
            <p>每日可提现一次</p>
            <p>到账时间以银行或微信支付处理为准</p>
            <p>每日申请提现时间为9:00-17:00</p>
          </div>
          <div className='btn-box'>
            <Button type='primary'
              onClick={() => vm.handleWithDraw()}
            >提现({Math.floor(item.Banlance / 100) * 100}元)</Button>
          </div>
        </div> : null
      }
    </div>
  )
})

@observer
class withdraw extends Component {
  constructor (props) {
    super(props)
    window.document.title = '提现'
    this.vm = new WithdrawVM(props)
  }
  render () {
    return (
      <div>
        <WithdrawList vm={this.vm} />
      </div>
    )
  }
}

export default withdraw
